<template>
    <div>
      <!--按钮-->
      <el-button style="margin: 20px 10px" @click="toAdd"
        type="primary" icon="el-icon-circle-plus-outline">添加</el-button>

      <!--表格
        el-table.data :表格要显示的数据;[{}]
        el-table.border :是否带有纵向边框
        el-table.@current-change :当表格的当前行发生变化的时候会触发该事件

        el-table-column.type : 如果设置了 index 则显示该行的索引（从 1 开始计算）
        el-table-column.label : 一列的标题;表头
        el-table-column.prop : 对应列内容的字段名，也可以使用 property 属性
        el-table-column.width : 对应列的宽度
      -->
      <el-table
        v-loading.fullscreen.lock="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"

        ref="singleTable"
        :data="tableData"
        highlight-current-row
        border
        @current-change="handleCurrentChangeForTable"
        style="margin:0px 10px;width: 95%">

        <el-table-column
          type="index"
          label="序号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          property="tmName"
          label="品牌名称"
          width="320"
          align="center">
        </el-table-column>
        <el-table-column label="品牌LOGO" width="320" align="center">
          <template slot-scope="{ row, column, $index }">
            <img :src="row.logoUrl" width="80" height="60">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row, column, $index }">
            <el-button type="warning" size="mini" icon="el-icon-edit" @click="toUpdate(row)">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="toDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <el-pagination
        style="text-align: center;margin: 20px 10px;width: 95%"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangeForPagination"
        :current-page="page"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="limit"
        layout="prev, pager, next, jumper ,->,sizes , total"
        :total="total">
      </el-pagination>

      <!--
        对话框
        el-dialog.title:对话框的标题
        el-dialog.visible:是否显示对话框
      -->
      <el-dialog title="添加品牌" width="50%" :before-close="handleClose"
                 :visible.sync="dialogVisible" >
        <!--
          表单
          el-form.model:表单数据对象
          el-form.rules	表单验证规则
          el-form-item.prop  表单域 model 字段，在使用 validate时，该属性是必填的
        -->
        <el-form ref="addTM" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="品牌名称" prop="name">
            <el-input v-model="form.name" style="width: 40%"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" prop="imageUrl">
            <!--
              上传组件
              el-upload.action : 必选参数，上传接口的地址
              el-upload.show-file-list:	是否显示已上传文件列表
              el-upload.on-success:文件上传成功时的钩子
              el-upload.before-upload:上传文件之前的钩子
            -->
            <el-upload
              class="avatar-uploader"
              action="/dev-api/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip">
                  只能上传jpg/png文件，且不超过30kb
                </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "trademarkList",
        data() {
          var validatePass = (rule, value, callback) => {
            // value : 使用当前验证规则的表单的内容
            // callback被调用时 如果没有传任何参数 则代表通过验证
            // callback被调用时 如果有Error参数 则代表未通过验证
            if (value === '张子扬') {
              callback(new Error('禁止输入敏感词汇'));
            } else {
              callback();
            }
          };
          return {
            tableData: [], //表格对应的数据
            currentRow: null, //代表当前行的信息
            page:1,//当前页
            limit:3,//每页显示多少条数据  这个值必须出现在page-sizes数组中
            total:0,//总条数
            dialogVisible:false,//添加的对话框是否显示
            form:{
              id:"",
              name:"",
              imageUrl:""
            },
            loading:false, //控制表格的loading效果的
            rules:{
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' },
                { validator: validatePass, trigger: ['change','blur'] },
              ],
              imageUrl:[
                { required: true, message: '请选择品牌Logo', trigger: 'blur' }
              ]
            }
          }
        },
        methods: {
          //点击删除按钮
          toDelete(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              //发送请求 进行删除操作
              await this.$API.product.trademark.deleteBaseTrademark(id);
              //拿tableData做判断 代表的是删之前的状态
              //如果tableData的length === 1代表的是当前页只有一条数据(且total !== 1) 删除之后应该去上一页

              //如果total === 1 总共只有一条数据 删除之后应该留在当前页
              //如果tableData的length > 1 代表的是当前页不只有一条数据 删除之后应该留在当前页
              this.page = this.tableData.length > 1 || this.total === 1 ? this.page : this.page-1;
              await this.getBaseTrademark()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch((error) => {
              error === "cancel" && this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          //点击对话框中的确定按钮 发送请求进行新增或修改操作
          addOrUpdate(){
            this.$refs.addTM.validate(async (valid)=>{
              if(valid){
                //发送新增请求
                const {name:tmName,imageUrl:logoUrl,id} =  this.form;
                await this.$API.product.trademark.addOrUpdate({id,logoUrl,tmName})
                //关闭弹窗
                this.dialogVisible=false;
                //刷新界面(修改应该留在当前页 新增应该返回第一页)
                if(!id) this.page =1;
                await this.getBaseTrademark();
              }
            })
          },
          //点击修改按钮
          toUpdate(row){
            //让对话框显示
            this.dialogVisible = true;
            //数据回显 row:当前行数据
            this.form.id = row.id;
            this.form.name = row.tmName;
            this.form.imageUrl = row.logoUrl;
            //对表单进行重置
            this.$nextTick(()=>{
              this.$refs.addTM.clearValidate()
            })
          },
          //点击添加按钮
          toAdd(){
            //让对话框显示
            this.dialogVisible = true;
            //数据清空
            this.form.id = "";
            this.form.name = "";
            this.form.imageUrl = "";
            //对表单进行重置
            this.$nextTick(()=>{
              this.$refs.addTM.clearValidate()
            })
          },
          //上传头像成功之后的钩子
          handleAvatarSuccess(response, file, fileList){
            // response: action对应接口请求成功之后的返回值
            this.form.imageUrl = response.data
          },
          //上传头像之前的钩子
          beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt30KB = file.size / 1024  < 30;

            if (!isJPG) {
              //每一次this.$message调用都会返回一个Message实例对象
              this.$message({
                message:'上传头像图片只能是 JPG 格式!',
                duration:2000,
                type:"error"
              });
            }
            if (!isLt30KB) {
              //关闭此前所有的弹窗
              this.$message.closeAll()
              this.$message({
                message:'上传头像图片大小不能超过 30KB!',
                duration:2000,
                type:"error"
              });
            }
            return isJPG && isLt30KB;
          },
          //点击添加对话框右上角关闭按钮时的回调
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          },
          //设置表格中哪一行该被选中
          setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
          },
          //当表格被选中时触发的事件
          handleCurrentChangeForTable(val) {
            // val : 代表当前行的信息
            this.currentRow = val;
          },
          //当分页的每页数量产生改变时触发
          async handleSizeChange(val) {
            this.page = 1;
            this.limit = val;
            await this.getBaseTrademark();
          },
          //当当前页产生变化时触发
          async handleCurrentChangeForPagination(val) {
            //重新发送请求
            this.page = val;
            await this.getBaseTrademark();
          },
          //分页获取品牌数据的方法
          async getBaseTrademark(){
            //开启loading
            this.loading = true;
            const {page,limit} = this;
            const {data:{records,total}}
                = await this.$API.product.trademark.getBaseTrademark({page,limit});
            this.tableData = records;
            this.total = total;
            //关闭loading
            this.loading = false;
          }
        },
        async mounted(){
          //发送请求获取表格数据
          await this.getBaseTrademark()
          //默认让第一行选中
          this.setCurrent(this.tableData[0]);
        }
    }
</script>

<style scoped>

</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
